
import {createContext, useState} from 'react'
import Nparent from "./parent";
// useContext()---只有需要接收的组件会用到
//创建之后并且导出
const Counet = createContext()

function Grand () {
    let [count,setCount] = useState({
        i:0,
        b:'string'
    })
    return (
        <div>
            <div>
                <h1>这是祖宗组件</h1>
                <p>跨组件传值和父子组件传值是一样的</p>
                <p>案例:对象</p>
                <button
                    /*onClick={ setCount({
                        ...count,
                        i:count.i++
                    }) }
                    click里面必须匿名函数这个匿名函数可以返回一个回调函数
                    这样写会报错:大意是太多的重渲染,react限制了渲染次数,以防止无线循环
                    Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
                    */
                    onClick={
                        () => setCount({
                            //为什么使用...扩展---是因为setCount函数会重构usestate里面的值所以要用...扩展来实现对象不能重名的特性,后者覆盖前着
                            ...count,
                            i:count.i+1
                        })
                    }
                >点击i+1</button>
                <p>{count.i}{count.b}</p>
                {/*
                这里报了一个错误说h2标签不能是p标签的后面所以把p标签改成div就可以了
                */}
                {/*<p>*/}
                <div>
                    <span>这里是传进来的Counet组件包裹着中间的组件</span>
                    <Counet.Provider value={count}>
                        <Nparent/>
                    </Counet.Provider>
                </div>
                {/*</p>*/}
            </div>
        </div>
    )
}

export {
    Grand,
    Counet
}